<template>
	<view class="phone pf" v-show="showTel">
		<view class="close" @click="closePop">
			<image :src="close_img" />
			</view>
		<view class="card">
			<view class="name x-c">是否拨打客服热线</view>
			<view class="num x-c">{{mobile}}</view>
			<view class="x-c" @click="callPhone">
				<view class="submit x-c">立即呼叫</view>
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"phone",
		data() {
			return {
				showTel: false,
				close_img: this.imgUrl + 'close.png' 
			};
		},
		props: {
			mobile: {
				type: String,
				default: '0595-86060899'
			},
		},
		methods: {
			// 显示
			showPhone() {
				this.$emit('showTel')
			},
			// 隐藏
			closePop() {
				this.showTel = false
			},
			// 拨打电话
			callPhone() {
				this.$tools.callphone(this.mobile)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.phone {
	    top: 0;
	    bottom: 0;
	    right: 0;
	    left: 0;
	    width: 100%;
	    height: 100vh;
	    z-index: 999;
	    background-color: rgba(#000,.7);
	        image {
	            position: absolute;
	            right: 64rpx;
	            top: 420rpx;
	            width: 40rpx;
	            height: 40rpx;
	        }
	    .card {
	        width: 620rpx;
	        height: 334rpx;
	        border-radius: 24rpx;
	        background-color: #fff;
	        margin: 500rpx 66rpx 0 66rpx;
	        .name {
	            font-size: 24rpx;
	            color: #333;
	            padding: 44rpx 0 24rpx 0;
	        }
	        .num {
	            font-size: 44rpx;
	            font-weight: 700;
	            color: #030303;
	            line-height: 36rpx;
				padding: 24rpx 0 36rpx 0;
	        }
	        .submit {
	            width: 530rpx;
	            height: 88rpx;
	            background: linear-gradient(270deg,#ff977b, #ff2d1b);
	            border-radius: 44rpx;
	            color: #fff;
	        }
	    }
	    
	}
</style>
